/** @生成海报 **/
export function createPoster(canvasInfo, options, callback, callBackShare) {
  uni.showLoading({
    title: '海报生成中…',
    mask: true
  })
  const myCanvas = uni.createCanvasContext(canvasInfo.id, this)
  var index = 0
  drawCanvas(myCanvas, canvasInfo, options, index, () => {
    // console.log("00000000000000")
    myCanvas.draw(true, () => {
      // console.log("1111111111111")
      // 延迟，等canvas画完
      const timer = setTimeout(() => {
        savePoster.call(this, canvasInfo.id, callback, callBackShare)
        clearTimeout(timer)
      }, 1000)
    })
  })
}
// 绘制中
async function drawCanvas(myCanvas, canvasInfo, options, index, drawComplete) {
  // console.log("2222222222222")
  let item = options[index]
  //    类型    颜色  left  right  top  bottom   宽      高     圆角    图片  文本内容
  let { type, color, left, right, top, bottom, width, height, radius, url, content, fontSize, textAlign } = item
  radius = radius || 0
  const { width: canvasWidth, height: canvasHeight } = canvasInfo
  switch (type) {
    /** @文本 **/
    case 'text':
      if (!content) break
      myCanvas.setFontSize(fontSize)
      item.width = width || myCanvas.measureText(content).width
      // console.log(myCanvas.measureText(content))
      // left位置
      if (right !== undefined) {
        item.left = canvasWidth - right - item.width
      } else if (left === 'center') {
        item.left = canvasWidth / 2 - item.width / 2
      }
      // top位置
      if (bottom !== undefined) {
        item.top = canvasHeight - bottom - fontSize
      }
      if (top) {
        item.top = item.top + fontSize
      }
      // if (textAlign) {
      //   myCanvas.textAlign = textAlign
      //   item.left = left + width / 2
      // }
      // console.log("开始绘制文字")
      drawText(myCanvas, item)
      break
    /** @图片 **/
    case 'image':
      if (!url) break
      var imageTempPath = await getImageTempPath(url)
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      } else if (left === 'center') {
        left = canvasWidth / 2 - width / 2
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      // 带圆角
      if (radius) {
        myCanvas.save()
        myCanvas.beginPath()
        // 圆形图片
        if (radius === '50%') {
          myCanvas.arc(left + width / 2, top + height / 2, width / 2, 0, Math.PI * 2, false)
        } else {
          if (width < 2 * radius) radius = width / 2
          if (height < 2 * radius) radius = height / 2
          myCanvas.beginPath()
          myCanvas.moveTo(left + radius, top)
          myCanvas.arcTo(left + width, top, left + width, top + height, radius)
          myCanvas.arcTo(left + width, top + height, left, top + height, radius)
          myCanvas.arcTo(left, top + height, left, top, radius)
          myCanvas.arcTo(left, top, left + width, top, radius)
          myCanvas.closePath()
        }
        myCanvas.clip()
      }
      myCanvas.drawImage(imageTempPath, left, top, width, height)
      myCanvas.restore()
      break
    /** @盒子 **/
    case 'block':
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      } else if (left === 'center') {
        left = canvasWidth / 2 - width / 2
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      if (width < 2 * radius) {
        radius = width / 2
      }
      if (height < 2 * radius) {
        radius = height / 2
      }
      if (item.isGradient) {
        const gradient = myCanvas.createLinearGradient(0, 0, canvasWidth, canvasHeight);
        gradient.addColorStop(0, item.startColor);
        gradient.addColorStop(1, item.endColor);
        myCanvas.setFillStyle(gradient)
      } else {
        myCanvas.fillStyle = color
        myCanvas.strokeStyle = color
      }
      myCanvas.beginPath()
      myCanvas.moveTo(left + radius, top)
      myCanvas.arcTo(left + width, top, left + width, top + height, radius)
      myCanvas.arcTo(left + width, top + height, left, top + height, radius)
      myCanvas.arcTo(left, top + height, left, top, radius)
      myCanvas.arcTo(left, top, left + width, top, radius)
      // myCanvas.stroke()
      myCanvas.fill()
      myCanvas.closePath()
      break
    /** @边框 **/
    case 'border':
      // left位置
      if (right !== undefined) {
        left = canvasWidth - right - width
      }
      // top位置
      if (bottom !== undefined) {
        top = canvasHeight - bottom - height
      }
      myCanvas.beginPath()
      myCanvas.moveTo(left, top)
      myCanvas.lineTo(left + width, top + height)
      myCanvas.strokeStyle = color
      myCanvas.lineWidth = width
      myCanvas.stroke()
      break
  }
  // 递归边解析图片边画
  if (index === options.length - 1) {
    drawComplete()
  } else {
    index++
    drawCanvas(myCanvas, canvasInfo, options, index, drawComplete)
  }
}
// 下载并保存
function savePoster(canvasId, callback, callBackShare) {
  uni.canvasToTempFilePath(
    {
      canvasId,
      success(res) {
        callback && callback(res.tempFilePath)
        // console.log("分享的图片路径", res.tempFilePath)
        uni.showShareImageMenu({
          path: res.tempFilePath,
          success() {
            uni.showToast({
              icon: 'success',
              title: '分享成功！'
            })
          },
          fail() {
            // uni.showToast({
            //   icon: 'none',
            //   title: '分享失败，请稍后再试~'
            // })
          },
          complete() {
            uni.hideLoading()
            callBackShare && callBackShare()
          }
        })
      },
      fail(res) {
        // console.log('图片保存失败：', res.errMsg)
        uni.showToast({
          icon: 'none',
          title: '保存失败，请稍后再试~'
        })
      }
    },
    this
  )
  // uni.showLoading({
  //   title: '保存中…',
  //   mask: true
  // })
  // uni.canvasToTempFilePath(
  //   {
  //     canvasId,
  //     success(res) {
  //       callback && callback(res.tempFilePath)
  //       uni.saveImageToPhotosAlbum({
  //         filePath: res.tempFilePath,
  //         success() {
  //           uni.showToast({
  //             icon: 'success',
  //             title: '保存成功！'
  //           })
  //         },
  //         fail() {
  //           uni.showToast({
  //             icon: 'none',
  //             title: '保存失败，请稍后再试~'
  //           })
  //         },
  //         complete() {
  //           uni.hideLoading()
  //         }
  //       })
  //     },
  //     fail(res) {
  //       // console.log('图片保存失败：', res.errMsg)
  //       uni.showToast({
  //         icon: 'none',
  //         title: '保存失败，请稍后再试~'
  //       })
  //     }
  //   },
  //   this
  // )
}
// 绘制文字（带换行超出省略…功能）
function drawText(ctx, item) {
  // console.log("绘制文字===0000")
  let { content, width, maxLine, left, top, lineHeight, color, fontSize } = item
  // console.log("绘制文字===1111")
  content = String(content)
  lineHeight = (lineHeight || 1.3) * fontSize
  // console.log("绘制文字===2222")
  // 字体
  ctx.setFontSize(fontSize)
  // 颜色
  ctx.setFillStyle(color)
  // 加粗
  // ctx.setFontWeight(fontWeight)
  // 文本处理
  let strArr = content.split('')
  let row = []
  let temp = ''
  for (let i = 0; i < strArr.length; i++) {
    if (ctx.measureText(temp).width < width) {
      temp += strArr[i]
    } else {
      i-- //这里添加了i-- 是为了防止字符丢失，效果图中有对比
      row.push(temp)
      temp = ''
    }
  }
  row.push(temp) // row有多少项则就有多少行
  //如果数组长度大于2，现在只需要显示两行则只截取前两项,把第二行结尾设置成'...'
  if (row.length > maxLine) {
    let rowCut = row.slice(0, maxLine)
    let rowPart = rowCut[1]
    let text = ''
    let empty = []
    for (let i = 0; i < rowPart.length; i++) {
      if (ctx.measureText(text).width < width) {
        text += rowPart[i]
      } else {
        break
      }
    }
    empty.push(text)
    let group = empty[0] + '...' //这里只显示两行，超出的用...表示
    rowCut.splice(1, 1, group)
    row = rowCut
  }
  // 把文本绘制到画布中
  for (let i = 0; i < row.length; i++) {
    // 一次渲染一行
    ctx.fillText(row[i], left, top + i * lineHeight, width)
  }
}
// 获取图片信息
function getImageTempPath(url) {
  return new Promise((resolve) => {
    if (url.includes('http')) {
      uni.downloadFile({
        url,
        success: (res) => {
          uni.getImageInfo({
            src: res.tempFilePath,
            success: (res) => {
              resolve(res.path)
            }
          })
        },
        fail: (res) => {
          // console.log('图片下载失败：', res.errMsg)
        }
      })
    } else {
      resolve(url)
    }
  })
}
